import { Component } from 'react'
import { Grid, Card as VantCard } from 'antd-mobile'
import { withRouter, NextRouter } from 'next/router'
import Head from 'next/head'
import PageLayout from '@/components/layouts/PageLayout'
import { RequireAuth } from '@/utils/decorators/auth'

interface HomePageProps {
  router: NextRouter
}

class HomePage extends Component<HomePageProps> {
  menus = [
    { title: '理财产品', icon: '💰', path: '/finance' },
    { title: '转账汇款', icon: '🔄', path: '/transfer' },
    { title: '生活缴费', icon: '📱', path: '/payment' },
    { title: '信用卡', icon: '💳', path: '/credit' },
  ]

  @RequireAuth()
  async handleMenuClick(path: string) {
    await this.props.router.push(path)
  }

  render() {
    return (
      <>
        <Head>
          <title>移动端应用</title>
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        </Head>
        <PageLayout>
          <div style={{ padding: '16px' }}>
            <VantCard>
              <div style={{ padding: '24px 0', textAlign: 'center' }}>
                <h3 style={{ marginBottom: '8px' }}>账户总资产（元）</h3>
                <div style={{ fontSize: '32px', fontWeight: 'bold' }}>138,568.00</div>
              </div>
            </VantCard>

            <div style={{ marginTop: '24px' }}>
              <Grid columns={4} gap={8}>
                {this.menus.map((menu, index) => (
                  <Grid.Item 
                    key={index} 
                    onClick={() => this.handleMenuClick(menu.path)}
                  >
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontSize: '32px', marginBottom: '4px' }}>
                        {menu.icon}
                      </div>
                      <div>{menu.title}</div>
                    </div>
                  </Grid.Item>
                ))}
              </Grid>
            </div>

            <div style={{ marginTop: '24px' }}>
              <VantCard title='最近交易'>
                {[1, 2, 3].map((item) => (
                  <div key={item} style={{ 
                    padding: '12px',
                    borderBottom: item !== 3 ? '1px solid #f5f5f5' : 'none'
                  }}>
                    <div style={{ 
                      display: 'flex', 
                      justifyContent: 'space-between',
                      alignItems: 'center' 
                    }}>
                      <div>
                        <div>转账支出</div>
                        <div style={{ fontSize: '12px', color: '#999' }}>2024-02-28</div>
                      </div>
                      <div style={{ color: '#ff4d4f' }}>-2,000.00</div>
                    </div>
                  </div>
                ))}
              </VantCard>
            </div>
          </div>
        </PageLayout>
      </>
    )
  }
}

export default withRouter(HomePage)